<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Font - Easy Frame</title>
    <meta name="description" content="Updates and statistics">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!--str:::全局css -->
    <link href="/assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/css/demo1/style.bundle.css" rel="stylesheet" type="text/css"/>
    <!--end::全局css -->

    <link rel="shortcut icon" href="/assets/media/logos/favicon.ico"/>
</head>
<body class="e-page--loading">
<div class="e-content">
    <div class="row">
        <div class="col">
            <div class="alert alert-light alert-elevate fade show" role="alert">
                <div class="alert-icon"><i class="flaticon-warning e-font-brand"></i></div>
                <div class="alert-text">
                    为尽量避免使用行内css和方便的设置文字样式，所以添加了常用的font工具
                </div>
            </div>
        </div>
    </div>
    <form class="e-form">
        <div class="card">
            <div class="card-head">
                <div class="card-head-label">
                    <h3 class="card-head-title">
                        Font
                    </h3>
                </div>
            </div>
            <div class="card-body">
                <table class="table">
                    <thead>
                    <tr>
                        <th>class</th>
                        <th>style</th>
                        <th>示例</th>
                        <th>说明</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td><code>e-font-sm</code></td>
                        <td><code>font-size: .8rem !important;</code></td>
                        <td>
                            <span class="e-font-sm">Easy Frame</span>
                        </td>
                        <td>设置字体大小为0.8rem</td>
                    </tr>
                    <tr>
                        <td><code>e-font-md</code></td>
                        <td><code>font-size: .9rem !important;</code></td>
                        <td>
                            <span class="e-font-md">Easy Frame</span>
                        </td>
                        <td>设置字体大小为0.9rem</td>
                    </tr>
                    <tr>
                        <td><code>e-font-lg</code></td>
                        <td><code>font-size: 1.2rem !important;</code></td>
                        <td>
                            <span class="e-font-lg">Easy Frame</span>
                        </td>
                        <td>设置字体大小为1.2rem</td>
                    </tr>
                    <tr>
                        <td><code>e-font-xl</code></td>
                        <td><code>font-size: 1.5rem !important;</code></td>
                        <td>
                            <span class="e-font-xl">Easy Frame</span>
                        </td>
                        <td>设置字体大小为1.5rem</td>
                    </tr>

                    <tr><td colspan="4"></td></tr>

                    <tr>
                        <td><code>e-font-regular</code></td>
                        <td><code>font-weight: 400 !important;</code></td>
                        <td>
                            <span class="e-font-regular">Easy Frame</span>
                        </td>
                        <td>设置字重为400</td>
                    </tr>
                    <tr>
                        <td><code>e-font-bold</code></td>
                        <td><code>font-weight: 500 !important;</code></td>
                        <td>
                            <span class="e-font-bold">Easy Frame</span>
                        </td>
                        <td>设置字重为500</td>
                    </tr>
                    <tr>
                        <td><code>e-font-bolder</code></td>
                        <td><code>font-weight: 600 !important;</code></td>
                        <td>
                            <span class="e-font-bolder">Easy Frame</span>
                        </td>
                        <td>设置字重为600</td>
                    </tr>
                    <tr>
                        <td><code>e-font-boldest</code></td>
                        <td><code>font-weight: 700 !important;</code></td>
                        <td>
                            <span class="e-font-boldest">Easy Frame</span>
                        </td>
                        <td>设置字重为700</td>
                    </tr>

                    <tr><td colspan="4"></td></tr>

                    <tr>
                        <td><code>e-font-transform-u</code></td>
                        <td><code>text-transform: uppercase;</code></td>
                        <td>
                            <span class="e-font-transform-u">Easy Frame</span>
                        </td>
                        <td>字母大写</td>
                    </tr>
                    <tr>
                        <td><code>e-font-transform-l</code></td>
                        <td><code>text-transform: lowercase;</code></td>
                        <td>
                            <span class="e-font-transform-l">Easy Frame</span>
                        </td>
                        <td>字母小写</td>
                    </tr>

                    <tr>
                        <td><code>e-font-transform-c</code></td>
                        <td><code>text-transform: capitalize;</code></td>
                        <td>
                            <span class="e-font-transform-c">easy frame</span>
                        </td>
                        <td>单词首字母大写</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </form>
</div>
<!--str:: 全局js -->
<script src="/assets/plugins/global/plugins.bundle.js"></script>
<script src="/assets/js/demo1/scripts.bundle.js"></script>
<!--end:: 全局js -->
</body>
</html>